<template>
  <Layout>
    <Form ref="form1" :model="form1" :label-width="120">
      <Row class="query-form2" v-show="!switchFlag">
        <Col span="8">
          <FormItem label="活动内容：" prop="activityContent">
            <Input class="query-form-el" type="text" v-model="form1.activityContent"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="活动主题：" prop="activityThemeId">
            <Select class="query-form-el" filterable v-model="form1.activityThemeId">
              <Option v-for="item in themeList" :value="item.programmeId" :key="item.programmeId">{{
                  item.themeName
                }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <div style="float: right;">
            <Button class="ivu-btn-query" icon="md-search" @click="query1">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text">
              展开
              <Icon type="ios-arrow-down"/>
            </Button>
          </div>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form2">
        <Col span="8">
          <FormItem label="活动内容：" prop="activityContent">
            <Input class="query-form-el" type="text" v-model="form1.activityContent"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="活动主题：">
            <Select class="query-form-el" filterable v-model="form1.activityThemeId">
              <Option v-for="item in themeList" :value="item.programmeId" :key="item.programmeId">{{
                  item.themeName
                }}
              </Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="活动时间：">
            <Date-picker type="daterange" style="width: 95%" v-model="activityDate"/>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form2">
        <Col span="8">
          <FormItem label="主办单位：" prop="orgName">
            <Input class="query-form-el" type="text" v-model="form1.orgName"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="活动负责人：" prop="activityLeader">
            <Input class="query-form-el" type="text" v-model="form1.activityLeader"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <div style="float: right;">
            <Button class="ivu-btn-query" icon="md-search" @click="query1">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2"
                    type="text">收起
              <Icon type="ios-arrow-up"/>
            </Button>
          </div>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" class="ivu-btn-add" icon="md-add" @click="addInfo">新增</Button>
          <DownloadButton :api="exportUrl" :export-form-before="exportBefore" :query-form="form1"></DownloadButton>
        </Col>
      </Row>
    </Form>

    <Table ref='table' :height="tableHeight" :loading="loading" @on-selection-change='getSelectRows'
           border :columns="columns1" :data="dataTable" @on-sort-change="sortChange">
    </Table>

    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
              show-total show-sizer show-elevator/>
      </Col>
    </Row>

    <Modal title="活动信息新增" :transfer=false :mask-closable="false" v-model="model1" :width=1200>
      <Row>
        <Col span="24">
          <Form ref="form1datacopy" :model="form1datacopy" :rules="ruleCustom" label-position="top">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="活动方案：" prop="activityThemeId">
                  <Input type="text" v-model="form1datacopy.programmeName" readonly>
                    <Button slot="append" @click="activityForSelectIsTrue"
                            icon="ios-search"></Button>
                  </Input>

                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="活动主题：" prop="activityTheme">
                  <Input type="text" v-model="form1datacopy.activityTheme" readonly></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
          <Row type="flex" justify="space-around" class="code-row-bg">
            <Col span="23">
              <Button style="margin-top:20px" class="ivu-btn-add" icon="md-add" @click="addPlan()">新增
              </Button>
            </Col>
          </Row>
          <Row type="flex" justify="space-around" class="code-row-bg">
            <Col span="23">
              <Table class="tableClass" highlight-row stripe border
                     style="margin-top:20px;overflow-y:auto;"
                     height="400px" :loading="loading" :columns="planColumn" :data="planDatas">
              </Table>
            </Col>
          </Row>

        </Col>
      </Row>
      <div slot="footer">
        <Button @click="submit('form1datacopy')" class="ivu-btn-save" :loading="buttonLoading">确定</Button>
        <Button @click="handleCancel" class="ivu-btn-cancel">取消</Button>
      </div>
    </Modal>
    <Modal title="活动信息修改" :transfer=false v-model="model3" :width=600>
      <Row>
        <Col span="24">
          <Form :model="form1datacopy" :rules="ruleCustomModify" label-position="top">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="活动方案：" prop="activityThemeId">
                  <Input type="text" v-model="form1datacopy.programmeName" readonly>
                    <Button slot="append" @click="activityForSelectIsTrue"
                            icon="ios-search"></Button>
                  </Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="活动主题：" prop="themeName">
                  <Input type="text" v-model="form1datacopy.themeName" readonly></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="参加人员：" prop="participants">
                  <Input type="text" v-model="form1datacopy.participants"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="负责人：" prop="activityLeader">
                  <Input type="text" v-model="form1datacopy.activityLeader"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="开始时间：" prop="startDate">
                  <DatePicker v-model="form1datacopy.startDate" type="date"
                              placeholder="请输入"></DatePicker>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="结束时间：" prop="endDate">
                  <DatePicker v-model="form1datacopy.endDate" type="date"
                              placeholder="请输入"></DatePicker>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="活动地点：" prop="activityAddress">
                  <Input type="text" v-model="form1datacopy.activityAddress"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="活动内容：" prop="activityContent">
                  <Input type="textarea" v-model="form1datacopy.activityContent"></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">

        <Button @click="submit('form1datacopy')" class="ivu-btn-save" :loading="buttonLoading">确定</Button>
        <Button @click="handleCancel" class="ivu-btn-cancel">取消</Button>
      </div>
    </Modal>
    <Modal title="活动信息详情" :transfer=false v-model="model2" :width=700 class="modal-view-detail">
      <Row>
        <Col span="24">
          <Form :model="showdata" :label-width="100">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="活动方案：" prop="activityContent">
                  {{ showdata.programmeName }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="活动主题：" prop="themeName">
                  {{ showdata.themeName }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="参加人员：" prop="activityLeader">
                  {{ showdata.participants }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="负责人：" prop="activityLeader">
                  {{ showdata.activityLeader }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label="开始时间：" prop="startDate">
                  {{ showdata.startDate }}
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label="结束时间：" prop="endDate">
                  {{ showdata.endDate }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="活动地点：" prop="activityAddress">
                  {{ showdata.activityAddress }}
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label="活动内容：" prop="activityContent">
                  {{ showdata.activityContent }}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button class='ivu-btn-save' @click="model2=false">关闭</Button>
      </div>
    </Modal>
    <Modal title="活动方案选择" :transfer=false footer-hide v-model="activityForSelectModal" :width=900>
      <ActivityForSelect @getActivityData="getActivityData">
      </ActivityForSelect>
      <div slot="footer">
        <Button class='ivu-btn-save' @click="activityForSelectModal=false">关闭</Button>
      </div>
    </Modal>
  </layout>
</template>

<script>
import {Api} from '../../../../api/index.js'
import DownloadButton from '@/components/download-button';
import {sessionStorage} from '../../../../common/cacheUtils.js';
import ActivityForSelect from "./activityForSelect";

export default {
  components: {ActivityForSelect, DownloadButton},
  data() {
    return {
      exportUrl: Api.activityMessageExport,
      buttonLoading: false,
      loading: false,
      activityDate: ['', ''],
      activityForSelectModal: false,
      switchFlag: false,
      form1: {},
      //分页参数
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {
          minWidth: 300,
          title: '主题名称',
          align: 'center',
          key: 'themeName',
        },
        {
          minWidth: 300,
          title: '活动内容',
          align: 'center',
          tooltip: true,
          key: 'activityContent',
        },
        {
          minWidth: 150,
          title: '负责人',
          align: 'center',
          key: 'activityLeader',
        },
        {
          minWidth: 150,
          title: '主办单位',
          align: 'center',
          key: 'orgName',
        },

        {
          minWidth: 150,
          title: '活动开始时间',
          align: 'center',
          key: 'startDate',
          sortable: "custom",
          render: (h, params) => {
            return h('div', [
              (this.formatDate(new Date(params.row.startDate), 'yyyy-MM-dd'))
            ]);
          }
        },

        {
          minWidth: 300,
          title: '活动结束时间',
          align: 'center',
          key: 'endDate',
          sortable: "custom",
          render: (h, params) => {
            return h('div', [
              (this.formatDate(new Date(params.row.endDate), 'yyyy-MM-dd'))
            ]);
          }

        },
        {
          minWidth: 200,
          title: '活动地点',
          align: 'center',
          key: 'activityAddress',
        },

        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px'
                },
                on: {
                  click: () => {
                    this.showData(params, 1);
                  }
                }
              }, '详情'),
              h('Divider', {
                props: {
                  type: 'vertical',
                }
              }, ''),
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px',
                  marginLeft: '8px',
                  color: params.row.createUserId == sessionStorage('userId').getObject('userId').userId || this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId) || sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined ? '' : '#d0d0d0',
                  pointerEvents: params.row.createUserId == sessionStorage('userId').getObject('userId').userId || this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId) || sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined ? '' : 'none'
                },
                on: {
                  click: () => {
                    this.showData(params, 2);
                  }
                }
              }, '修改'),
              h('Divider', {
                props: {
                  type: 'vertical',
                }
              }, ''),
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '14px',
                  marginLeft: '8px',
                  color: params.row.createUserId == sessionStorage('userId').getObject('userId').userId || this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId) || sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined ? 'red' : '#d0d0d0',
                  pointerEvents: params.row.createUserId == sessionStorage('userId').getObject('userId').userId || this.Common.userIdList.includes(sessionStorage('userId').getObject('userId').userId) || sessionStorage('userId').getObject('userId').userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined ? '' : 'none'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '数据删除',
                      content: '<p>确定删除该条信息</p>',
                      okText: '确认',
                      onOk: () => {
                        this.deleteData(params);
                      },
                      cancelText: '取消'
                    });
                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      ruleCustom: {
        activityName: [{
          required: true,
          message: '  ',
          trigger: 'blur'
        }],
        activityThemeId: [{
          validator: (rule, value, callback) => {
            if (this.form1datacopy.activityThemeId == null || this.form1datacopy.activityThemeId == '' || this.form1datacopy.activityThemeId == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
      },
      ruleCustomModify: {
        activityName: [{
          required: true,
          message: '  ',
          trigger: 'blur'
        }],
        activityThemeId: [{
          validator: (rule, value, callback) => {
            if (value == null || value == '' || value == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        participants: [{
          required: true,
          message: '  ',
          trigger: 'blur'
        }],
        activityLeader: [{
          required: true,
          message: '  ',
          trigger: 'blur'
        }],
        activityAddress: [{
          required: true,
          message: '  ',
          trigger: 'blur'
        }],
        activityContent: [{
          required: true,
          message: '  ',
          trigger: 'blur'
        }],
        startDate: [{
          validator: (rule, value, callback) => {
            if (value == null || value == '' || value == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'blur'
        }],
        endDate: [{
          validator: (rule, value, callback) => {
            if (value == null || value == '' || value == undefined) {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'blur'
        }]
      },
      form1datacopy: {
        operateOrg: '',
        workType: '',
        workGrade: '',
        planStartTime: new Date(),
        planEndTime: new Date(),
        planName: ''
      },
      dataTable: [],
      showdata: {},
      model1: false,
      model2: false,
      model3: false,
      add: false,
      tableHeight: 10,
      file: null,
      fileName: null,
      downloadUrl: Api.downloadMongoFile,
      themeList: [],
      planDatas: [],
      planColumn: [
        {
          type: 'index',
          minWidth: 90,
          align: 'center',
          title: '活动计划'
        },
        {
          title: '开始时间',
          minWidth: 120,
          align: 'center',
          key: 'startDate',
          render: (h, params) => {
            return h('DatePicker', {
              props: {
                type: 'date',
                value: params.row.startDate
              },
              on: {
                'on-change': (newDate, oldDate) => {
                  params.row.startDate = newDate
                  this.planDatas[params.index] = params.row;
                }
              }
            });
          }
        },
        {
          title: '结束时间',
          minWidth: 120,
          align: 'center',
          key: 'endDate',
          render: (h, params) => {
            return h('DatePicker', {
              props: {
                type: 'date',
                value: params.row.endDate
              },
              on: {
                'on-change': (newDate, oldDate) => {
                  params.row.endDate = newDate
                  this.planDatas[params.index] = params.row;
                }
              }
            });
          }
        },
        {
          title: '地点',
          minWidth: 120,
          align: 'center',
          key: 'content',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'textarea',
                value: params.row.activityAddress
              },
              on: {
                'on-change': (event) => {
                  params.row.activityAddress = event.target.value
                  this.planDatas[params.index] = params.row;

                }
              }
            });
          }
        },
        {
          title: '活动内容',
          minWidth: 300,
          align: 'center',
          key: 'content',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'textarea',
                value: params.row.activityContent
              },
              on: {
                'on-change': (event) => {
                  params.row.activityContent = event.target.value
                  this.planDatas[params.index] = params.row;
                }
              }
            });
          }
        },
        {
          title: '参加人员',
          minWidth: 100,
          align: 'center',
          key: 'content',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'textarea',
                value: params.row.participants
              },
              on: {
                'on-change': (event) => {
                  params.row.participants = event.target.value
                  this.planDatas[params.index] = params.row;
                }
              }
            });
          }
        },
        {
          title: '活动负责人',
          minWidth: 100,
          align: 'center',
          key: 'content',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'textarea',
                value: params.row.activityLeader
              },
              on: {
                'on-change': (event) => {
                  params.row.activityLeader = event.target.value
                  this.planDatas[params.index] = params.row;
                }
              }
            });
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          fixed: 'right',
          minWidth: 150,
          render: (h, params) => {
            return h('div', [
              h('A', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  color: 'red',
                  fontSize: '14px'
                },
                on: {
                  click: () => {
                    this.deletePlan(params.index)
                  }
                }
              }, '删除')
            ]);
          }
        }
      ]
    }
  },
  mounted: function () {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    this.query();
    this.selectThemeList();
  },
  methods: {

    activityForSelectIsTrue() {
      this.activityForSelectModal = true;

    },
    getActivityData(row) {

      //this.dataForm.saRiskInfo.areaActivity = row.activityId;
      console.log(row);
      this.form1datacopy.activityThemeId = row.programmeId;
      this.form1datacopy.programmeName = row.programmeName;
      this.form1datacopy.activityTheme = row.themeName;
      //
      this.activityForSelectModal = false;

    },

    selectThemeList() {
      let data = {
        startPage: 1,
        size: 100,
        activityType: this.$route.query.type
      }

      let url = Api.queryProgramme;
      this.$http.get(url, {
        params: data
      }).then((res) => {
        this.themeList = res.data.data.data;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },

    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },

    copyArray(arr) {
      return JSON.parse(JSON.stringify(arr));
    },
    sortChange(data) {
      if (data.order === 'asc' || data.order === 'desc') {
        let order = data.key
        this.form1.dynamicSort = order + ' ' + data.order
        this.query()
      }
    },
    addPlan() {
      var item = {
        startDate: "",
        endDate: "",
        activityAddress: "",
        activityLeader: "",
        activityContent: "",
        participants: ""
      }
      this.planDatas.push(item);
    },
    switchQuery(flag) {
      this.switchFlag = flag;
      if (this.switchFlag) {
        this.tableHeight = this.tableHeight - 44;
      } else {
        this.tableHeight = this.tableHeight + 44;
      }
    },
    showData(data, flag) {
      this.buttonLoading = false;
      if (flag == 1) {
        this.showdata = data.row;
        this.showdata.startDate = this.formatDate(new Date(this.showdata.startDate), 'yyyy-MM-dd');
        this.showdata.endDate = this.formatDate(new Date(this.showdata.endDate), 'yyyy-MM-dd');
        this.model2 = true;
      } else {
        //修改页面
        this.add = false;
        this.form1datacopy = data.row;
        this.form1datacopy.startDate = this.formatDate(new Date(this.form1datacopy.startDate), 'yyyy-MM-dd');
        this.form1datacopy.endDate = this.formatDate(new Date(this.form1datacopy.endDate), 'yyyy-MM-dd');
        this.model3 = true;
      }
    },

    getSelectRows(rows) {
      this.deleteRows = rows;
    },

    deleteData(params) {
      let url = Api.deleteActivityMessage;
      this.$http.delete(url + '/' + params.row.id).then((res) => {
        if (res.data.status == 201) {
          this.$Message.error(res.data.msg);
        } else {
          this.$Message.success("删除成功");
        }
        this.query()
      }).catch(e => {
        this.$Message.error('请求失败' + e);
      })
    },
    cancel() {
      this.form1 = {};
      this.activityDate = ['', ''];
      this.query1();
    },
    query1() {
      this.pagedata.currentPage = 1;
      this.query();
    },
    exportBefore(data) {
      let orgId = sessionStorage('userId').getObject('userId').companyId
      data['orgId'] = orgId;
      data['activityType'] = this.$route.query.type;
      if (this.activityDate[0] != "" && this.activityDate[1] != "") {
        data['startDate'] = this.formatDate(new Date(this.activityDate[0]), 'yyyy-MM-dd');
        data['endDate'] = this.formatDate(new Date(this.activityDate[1]), 'yyyy-MM-dd');
      }
    },
    query() {
      this.loading = true;

      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,
        orgId: sessionStorage('userId').getObject('userId').companyId,
        activitysType: this.$route.query.type
      };
      this.loading = true;
      if (this.activityDate[0] != "" && this.activityDate[1] != "") {
        this.form1.startDate = this.formatDate(new Date(this.activityDate[0]), 'yyyy-MM-dd');
        this.form1.endDate = this.formatDate(new Date(this.activityDate[1]), 'yyyy-MM-dd');
      }

      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));

      let url = Api.queryActivityMessage;
      this.$http.get(url, {
        params: data
      }).then((res) => {
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },

    reset() {
      this.form1 = {}
      this.activityDate = ['', ''];
    },
    handleCancel() {
      this.form1datacopy = {};
      this.model1 = false;
      this.model3 = false;
      this.planDatas = [];
    },
    submit() {
      console.log(this.form1datacopy);
      this.$refs['form1datacopy'].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          let userId = sessionStorage('userId').getObject('userId').userId;
          let orgId = sessionStorage('userId').getObject('userId').orgInfo.orgId;
          if (this.add) {

            this.planDatas.forEach(item => {
              item.activityName = item.activityContent;
              item.activityThemeId = this.form1datacopy.activityThemeId;
              item.createUserId = userId;
              item.createOrgId = orgId;
              item.activitysType = this.$route.query.type
            })
            this.$http.post(Api.saveAllActivityMessage, this.planDatas).then((res) => {
              this.$Message.success("保存成功")
              this.model1 = false;
              this.query();
              this.buttonLoading = false;
            }).catch(e => {
              this.model1 = false;
              this.query();
              console.log(e)
              this.$Message.error("数据获取失败")
            })
          } else {
            this.form1datacopy.updateUserId = userId;
            this.form1datacopy.activitysType = this.$route.query.type;
            this.form1datacopy.updateOrgId = orgId;
            this.$http.post(Api.updateActivityMessage, this.form1datacopy).then((res) => {
              this.$Message.success("保存成功")
              this.model3 = false;
              this.query();
              this.buttonLoading = false;
            }).catch(e => {
              this.model3 = false;
              this.query();
              console.log(e)
              this.$Message.error("数据获取失败")
            })
          }
        } else {
          this.$Message.error('请填报完整!');
        }
      })
    },
    addInfo() {
      this.form1datacopy = {};
      this.planDatas = [];
      this.add = true;
      this.model1 = true;
    },
    deletePlan(index) {
      this.planDatas.splice(index, 1);
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
  },
}
</script>
<style lang='css' scoped>
@import '../../../../index.css';

.tableClass {
}

.tableClass >>> .ivu-table td {
  vertical-align: middle;
}

.tableClass >>> .ivu-table th {
  vertical-align: middle;
}

.tableClass >>> .ivu-input-suffix i {
  font-size: 16px;
  line-height: 50px;
  color: #808695;
}

.tableClass >>> .ivu-input {
  border-radius: 0px;
  vertical-align: middle;
  height: 100%;
}

.tableClass >>> textarea.ivu-input {
  height: 100%;
  vertical-align: middle;
}

.tableClass >>> ivu-date-picker {
  height: 100%;
  vertical-align: middle;
}

.tableClass >>> .ivu-table-cell {
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  box-sizing: border-box;
  height: 100%;
  /*flex 布局*/
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  /*实现水平居中*/
  justify-content: center;
  text-align: justify;
}

.tableClass >>> .ivu-date-picker {
  height: 100%;
}

.tableClass >>> .ivu-date-picker {
  height: 100%;
}

.tableClass >>> .ivu-input-wrapper {
  height: 100%;
}

.tableClass >>> .ivu-date-picker-rel {
  height: 100%;
}

.tableClass >>> .ivu-input-icon {
  line-height: 50px;
}
</style>
